<template>
  <div class="page">
    <main class="main">
      <x-tab title="基础信息：" :isShowExpand="false">
        <section class="detail">
          <el-descriptions
            direction="vertical"
            :column="3"
            label-class-name="title-style"
            content-class-name="content-style"
          >
            <el-descriptions-item label="合同编号">{{ detail.number }}</el-descriptions-item>
            <el-descriptions-item label="合同状态">{{
              selectDictLabel(dictOptions['srm_contract.state'], detail.state)
            }}</el-descriptions-item>
            <el-descriptions-item label="合同名称">{{ detail.contractName }}</el-descriptions-item>
            <el-descriptions-item label="合同类型">{{
              selectDictLabel(dictOptions['srm_contract.contract_type'], detail.contractType)
            }}</el-descriptions-item>
            <el-descriptions-item label="合同开始日期">{{ detail.beginDate }}</el-descriptions-item>
            <el-descriptions-item label="合同结束时间">{{ detail.endDate }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ detail.createName }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            direction="vertical"
            :column="1"
            label-class-name="title-style"
            content-class-name="content-style"
          >
            <el-descriptions-item label="合同情况说明"> {{ detail.remark }} </el-descriptions-item>
          </el-descriptions>
        </section>
      </x-tab>
      <x-tab title="物料定价信息：" :isShowExpand="false">
        <section class="detail">
          <el-descriptions
            direction="vertical"
            :column="3"
            label-class-name="title-style"
            content-class-name="content-style"
          >
            <el-descriptions-item label="甲方信息">{{ detail.firstPartyName }}</el-descriptions-item>
            <el-descriptions-item label="甲方联系人">{{ detail.firstPartyLiaison }}</el-descriptions-item>
            <el-descriptions-item label="甲方联系方式">{{ detail.firstPartyPhone }}</el-descriptions-item>
            <el-descriptions-item label="甲方地址">{{ detail.firstPartyAddr }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            direction="vertical"
            :column="3"
            label-class-name="title-style"
            content-class-name="content-style"
          >
            <el-descriptions-item label="乙方名称">{{ detail.supplierName }}</el-descriptions-item>
            <el-descriptions-item label="乙方联系人">{{ detail.supplierLiaison }}</el-descriptions-item>
            <el-descriptions-item label="乙方联系方式">{{ detail.supplierPhone }}</el-descriptions-item>
            <el-descriptions-item label="乙方地址">{{ detail.supplierAddr }}</el-descriptions-item>
          </el-descriptions>
        </section>
      </x-tab>
      <x-tab title="合同标的物信息：" :isShowExpand="false">
        <section class="detail">
          <x-table
            ref="tableCom"
            :height="tableData.length * 42 + 124 || 280"
            :isPagination="false"
            :data-source="tableData"
            :row-key="'id'"
          >
            <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
            <el-table-column
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.prop"
              :fixed="item.fixed"
              :show-overflow-tooltip="true"
              :width="item.width"
              :min-width="item.minWidth || '-'"
              :label="item.label"
              :sortable="'custom'"
            >
              <template #default="scope">
                <span v-if="item.prop === 'unitPrice' || item.prop === 'totalPrice'">{{
                  parseFloat(scope.row[item.prop]).toFixed(2)
                }}</span>
                <span v-else-if="item.prop === 'materialUnit'">{{
                  selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop]) | emptyVal
                }}</span>
                <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
              </template>
            </el-table-column>
          </x-table>
          <div class="total">合计金额: {{ detail.contractAmount }} 元</div>
        </section>
      </x-tab>
      <x-tab title="合同附件：" :isShowExpand="false">
        <section class="detail">
          <x-upload :edit-flag="false" :old-file-list="detail.files" />
        </section>
      </x-tab>
    </main>
    <fixed-btn-area>
      <el-button @click="goBack"> 返回 </el-button>
      <el-button type="primary" @click="confirm" v-show="detail.state === 2" v-hasPermi="['srm:contract:confirm']">
        确认合同
      </el-button>
      <el-button type="primary" @click="reject" v-show="detail.state === 2" v-hasPermi="['srm:contract:reject']">
        退回
      </el-button>
      <el-button type="primary" @click="mail" v-show="detail.state === 3" v-hasPermi="['srm:contract:mail']">
        邮寄合同
      </el-button>
      <el-button type="primary" @click="complete" v-show="detail.state === 6" v-hasPermi="['srm:contract:complete']">
        确认收到
      </el-button>
    </fixed-btn-area>
    <x-dialog
      :title="'回寄'"
      :close-on-click-modal="false"
      :show.sync="visible"
      append-to-body
      width="35%"
      :before-close="handleClose"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
    >
      <return-form ref="returnForm" :id="id"></return-form>
    </x-dialog>
  </div>
</template>

<script>
  import { PermissionsMixin, QueryDictMixin, TableListMixin, selectDictLabel } from '@package/utils'
  import {
    apiComplete,
    apiGetContractDetail,
    apiMailContract,
    apiConfirm,
    apiReject
  } from '@/modules/contractSupplier/api/manageContract.js'
  import { detailColumns } from '@/modules/contractSupplier/config/manageContract.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import ReturnForm from '@/modules/contractSupplier/components/ReturnForm.vue'

  export default {
    name: 'ManagePricingDetail',
    components: {
      ReturnForm
    },
    mixins: [PermissionsMixin, QueryDictMixin, TableListMixin],
    inject: ['closePages'],
    data() {
      return {
        columns: detailColumns,
        detail: {},
        srmDictKeys: ['srm_contract.state', 'srm_contract.contract_type', 'srm_material.material_unit'],
        id: null,
        visible: false
      }
    },
    watch: {
      id(val) {
        if (val) {
          this.getDetail()
        }
      }
    },
    created() {
      this.id = this.$route.query.id
    },
    methods: {
      apiReject,
      selectDictLabel,
      async getDetail() {
        const { data } = await apiGetContractDetail(this.id)
        this.detail = data || {}
        this.tableData = data?.details || []
      },
      async confirm() {
        const confirm = await this.$confirm('是否确认合同?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm) {
          if (confirm) {
            const { code } = await apiConfirm(this.id)
            if (code === EnumApiCode.Success) {
              this.$message.success('确认成功')
              this.$router.go(-1)
              this.closePages()
            }
          }
        }
      },
      async reject() {
        const confirm = await this.$confirm('是否退回合同?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm) {
          if (confirm) {
            const { code } = await apiReject(this.id)
            if (code === EnumApiCode.Success) {
              this.$message.success('退回成功')
              this.$router.go(-1)
              this.closePages()
            }
          }
        }
      },
      async complete() {
        const confirm = await this.$confirm('是否确认收到合同?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm) {
          const { code } = await apiComplete(this.id)
          if (code === EnumApiCode.Success) {
            this.$message.success('确认收到成功')
            this.$router.go(-1)
            this.closePages()
          }
        }
      },
      mail() {
        this.visible = true
      },
      async handleSubmit() {
        const returnForm = this.$refs.returnForm.form
        const confirm = await this.$confirm('是否确认邮寄?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm) {
          const { code } = await apiMailContract({
            ...returnForm,
            type: 1
          })
          if (code === EnumApiCode.Success) {
            this.$message.success('邮寄成功')
            await this.goBack()
          }
        }
        this.$refs.returnForm.resetForm()
        this.visible = false
      },
      handleClose() {
        this.visible = false
      },
      async goBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
  }
  .main {
    height: calc(100% - 71px);
    overflow-y: auto;
  }
  .detail {
    padding: 0 16px 16px;
    ::v-deep .title-style {
      color: #707683;
      font-size: 14px;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .table-title {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #707683;
      font-weight: normal;
    }
    .total {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
    }
  }
</style>
